<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    // String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/common/common-css.v2.jsp" %>
    <style>
        #jquery-table td {
            cursor: pointer !important;
            word-break: break-all;
            word-wrap: break-word;
        }

        .load_bg {
            background: #000;
            opacity: 0.1;
            left: 0;
            top: 0;
            position: fixed;
            height: 100%;
            width: 100%;
            overflow: hidden;
            z-index: 10000;
        }

        .load_img {
            left: 50%;
            top: 180px;
            position: fixed;
            height: 50px;
            overflow: hidden;
            z-index: 20000;
        }

        button.warn {
            background-color: rgb(255, 66, 83)
        }

        button.warn:hover {
            background-color: #FF8484;
        }

        button.warn:active {
            background-color: #CE5A5A;
        }

        .sub-window {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .7);
            z-index: 100;
        }

        .hidden {
            display: none;
        }

        .sub-window-content {
            position: absolute;
            left: 100px;
            right: 100px;
            top: 100px;
            background: #fff
        }

        .sub-window-title {
            width: 100%;
            height: 35px;
            text-align: center;
            line-height: 35px;
            background-color: #79c5f1;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
        }

        .close-sub {
            width: 100px;
            height: 100%;
            float: right;
            background-color: rgb(255, 66, 83);
            font-size: 20px;
            line-height: inherit;
            transition: background-color .2s;
        }

        .sub-window-main {
            padding: 10px;
        }

        .btn-container {
            float: left;
            clear: left;
            margin-bottom: 15px;
        }

        .sub-window-input div {
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        .sub-window-input label {
            min-width: 50px;
        }

        .sub-window-input input, .sub-window-input select {
            min-width: 250px;
        }

        #phones {
            width: 250px;
            height: 150px;
            resize: none;
        }
    </style>
</head>
<body class="no-skin">
<div class="load_bg" style="display:none;"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>

<div class="sub-window hidden" id="window-create-group">
    <div class="sub-window-content">
        <div class="sub-window-title">创建活动类型
            <div class="close-sub" onclick="closeWindow('window-create-group')">X</div>
        </div>
        <div class="sub-window-main">
            <div class="sub-window-input">
                <div>
                    <label for="groupName">活动类型名称:</label>
                    <input id="groupName" name="groupName" type="text" placeholder="活动类型名称">
                </div>

            </div>
            <div class="btn-container">
                <button id="btn-confirm-create-group" onclick="createGroup()">确认创建</button>
            </div>
        </div>
    </div>
</div>

<div class="sub-window hidden" id="window-create">
    <div class="sub-window-content">
        <div class="sub-window-title">创建活动
            <div class="close-sub" onclick="closeWindow('window-create')">X</div>
        </div>
        <div class="sub-window-main">
            <div class="sub-window-input">
                <div>
                    <label for="activityGroup">活动类型:</label>
                    <s:select id="activityGroup" name="activityGroup" list="%{activityGroupList}" listKey="id" listValue="name" headerKey="" headerValue="--请选择--"/>
                </div>

                <div>
                    <label for="activityName">活动名称:</label>
                    <input id="activityName" name="activityName" type="text" placeholder="活动名称">
                </div>

                <div>
                    <label for="money">红包金额:</label>
                    <input id="money" name="money" type="text" placeholder="1~200元">
                </div>

                <div>
                    <label for="redpackType">红包限制:</label>
                    <select id="redpackType">
                        <option value="" selected>--请选择--</option>
                        <option value="0">常规红包</option>
                    </select>
                </div>
            </div>
            <div class="btn-container">
                <button id="btn-confirm-create" onclick="create()">确认创建</button>
            </div>
        </div>
    </div>
</div>

<div class="sub-window hidden" id="window-send">
    <div class="sub-window-content">
        <div class="sub-window-title">派发红包
            <div class="close-sub" onclick="closeWindow('window-send')">X</div>
        </div>
        <div class="sub-window-main">
            <div class="sub-window-input widget-body">
                <div>
                    <label for="phones">手机号:</label>
                    <textarea id="phones" placeholder="多个手机号用逗号隔开"></textarea>
                </div>

                <div>
                    <label for="activity">活动:</label>
                    <s:select id="activity" name="activity" list="%{activityList}" listKey="id" listValue="name" headerKey="" headerValue="--请选择--"/>
                </div>

                <div>
                    <label for="remark">备注:</label>
                    <input type="text" name="remark" id="remark"/>
                </div>
            </div>
            <div class="btn-container">
                <button id="btn-confirm-send" onclick="preSend()">确认派发</button>
            </div>
        </div>
    </div>
</div>

<div class="page-content">
    <form id="queryForm">
        <div class="page-content-area">
            <div class="row">
                <div class="col-sm-12">
                    <div class="widget-box" style="border:0 solid #ccc; border-top:none;border-bottom:none;">
                        <div class="widget-header widget-header-blue widget-header-flat">
                            <h4 class="widget-title">选择条件进行查询</h4>
                            <div class="widget-toolbar">
                                <a href="#" data-action="collapse">
                                    <i class="ace-icon fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main clearfix">

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" style="text-align:right"
                                           for="startDate">派发开始时间:</label>
                                    <div class="col-sm-8">
                                        <div class="input-daterange input-group">
                                            <input type="text" class="date-picker form-control"
                                                   data-date-format="yyyy-mm-dd" style="padding-left:0"
                                                   name="startDate" id="startDate" placeholder="请选择派发开始时间">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" style="text-align:right"
                                           for="endDate">派发结束时间:</label>
                                    <div class="col-sm-8">
                                        <div class="input-daterange input-group">
                                            <input type="text" class="date-picker form-control"
                                                   data-date-format="yyyy-mm-dd" style="padding-left:0"
                                                   name="endDate" id="endDate" placeholder="请选择派发结束时间">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="phone"
                                           style="text-align:right;">手机号码:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="phone" id="phone"
                                               placeholder="查询手机号码">
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="sType"
                                           style="text-align:right;">红包限制:</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="sType" id="sType">
                                            <option value="" selected>全部</option>
                                            <option value="0">常规红包</option>
                                            <%--<option value="1">待生效红包</option>--%>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="groupId"
                                           style="text-align:right;">所属活动类型:</label>
                                    <div class="col-sm-8">
                                        <s:select id="groupId" name="groupId" list="%{activityGroupList}" listKey="id" listValue="name" headerKey="" headerValue="--全部活动类型--"/>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="activityId"
                                           style="text-align:right;">所属活动:</label>
                                    <div class="col-sm-8">
                                        <s:select id="activityId" name="activityId" list="%{activityList}" listKey="id" listValue="name" headerKey="" headerValue="--全部活动--"/>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 center">
                    <div class="clearfix form-actions">
                        <button class="btn btn-purple no-border" type="button" name="btn-query" onclick="query()"
                                id="btn-query">
                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                            查询
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-purple no-border" type="button" name="btn-create"
                                onclick="openWindow('window-create-group')"
                                id="btn-create-group">
                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                            新建活动类型
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-purple no-border" type="button" name="btn-create"
                                onclick="openWindow('window-create')"
                                id="btn-create">
                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                            新建活动
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-purple no-border" type="button" name="btn-send"
                                onclick="openWindow('window-send')"
                                id="btn-send">
                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                            派发红包
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-grey no-border" type="reset">
                            <i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
                            重置
                        </button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <table id="jquery-table" class="table table-striped table-bordered table-hover">
                    </table>
                </div>
            </div>

        </div>
    </form>
</div>


<%@ include file="/common/common-js.jsp" %>
<script type="text/javascript">
    var loadDom = $('.load_bg,.load_img');
    var jqTable = null;

    var subWindow = $('.sub-window');

    var $groupName = $('#groupName');
    var $btnConfirmGroup = $('#btn-confirm-create-group');

    var $activityGroup = $('#activityGroup');
    var $activityName = $('#activityName');
    var $money = $('#money');
    var $redpackType = $('#redpackType');
    var $confirmCreate = $('#btn-confirm-create');

    var $phones = $('#phones');
    var $activity = $('#activity');
    var $remark = $('#remark');
    var $btnConfirmSend = $('#btn-confirm-send');

    function createGroup() {
        $btnConfirmGroup.attr('disabled', false);
        var arg = {
            groupName: $groupName.val()
        };

        if (arg.groupName.length === 0) {
            alert('请输入活动类型名称');
            return;
        }

        $btnConfirmGroup.attr('disabled', true);
        loadDom.show();
        $.post(ctx + '/weixin/add_activity_group.action?rd=' + getRandom(), arg, function (json) {
            if (json.status === 1) {
                alert('创建成功');
            }
            else {
                alert('创建失败: ' + json.msg);
            }
            $btnConfirmGroup.attr('disabled', false);
            loadDom.hide();
        }, 'json')
    }

    function create() {
        $confirmCreate.attr('disabled', false);
        var arg = {
            activityGroup: $activityGroup.val(),
            activityName: $activityName.val(),
            money: $money.val(),
            redpackType: $redpackType.val()
        };

        if (arg.activityGroup.length === 0) {
            alert('请选择活动类型');
            return;
        }

        if (arg.activityName.length === 0) {
            alert('请输入活动名称');
            return;
        }

        if (arg.money.length === 0) {
            alert('请输入红包金额');
            return;
        }
        else {
            arg.money = window.parseFloat(arg.money);
            if (window.isNaN(arg.money)) {
                alert('红包金额必须为数字');
                return;
            }
            if (arg.money > 200 || arg.money < 1) {
                alert('红包金额必须介于1~200之间');
                return;
            }
        }

        if (arg.redpackType.length === 0) {
            alert('请选择红包限制类型');
            return;
        }
        else {
            arg.redpackType = window.parseInt(arg.redpackType);
        }

        $confirmCreate.attr('disabled', true);
        loadDom.show();
        $.post(ctx + '/weixin/add_activity.action?rd=' + getRandom(), arg, function (json) {
            if (json.status === 1) {
                alert('创建成功');
            }
            else {
                alert('创建失败: ' + json.msg);
            }
            $confirmCreate.attr('disabled', false);
            loadDom.hide();
        }, 'json')
    }

    function preSend() {
        var arg = {};

        arg.phones = $phones.val();
        arg.activity = $activity.val();
        arg.remark = $remark.val();

        if (arg.phones.length === 0) {
            alert('请输至少一个入手机号码');
            return;
        }
        else {
            var tmp = arg.phones;
            tmp = tmp.replace(/\s/g, '').replace(/，/g, ',');
            tmp = tmp.split(',');
            if (tmp.length === 0) {
                alert('请输入至少一个手机号码');
                return;
            }
            else {
                for (var i = 0, l = tmp.length; i < l; i++) {
                    if (!/^\d{11}$/.test(tmp[i])) {
                        alert('手机号码 ' + tmp[i] + ' 格式错误, 请输入正确的11位手机号码');
                        return;
                    }
                }
            }
            arg.phones = tmp.join(',');
        }

        if (arg.activity.length === 0) {
            alert('请选择红包活动');
            return;
        }

        if (arg.remark.length !== 0) {
            arg.remark = arg.remark.trim();
        }

        $btnConfirmSend.attr('disabled', true);
        loadDom.show();
        $.post(ctx + '/weixin/pre_send_redpack.action?rd=' + getRandom(), arg, function (json) {
            if (json.status !== 1) {
                $btnConfirmSend.attr('disabled', false);
                loadDom.hide();
                alert('服务器错误: ' + json.msg);
                return;
            }

            var name = json.activity.name,
                    money = json.activity.money / 100,
                    type = json.activity.type === 0 ? '普通红包' : '待生效红包';
            var title = '请确认将 [' + name + '-' + money + '元-' + type + '] 派发到以下账户:\n\n';

            var content = title;
            var i, l;
            for (i = 0, l = json.pass.length; i < l; ++i) {
                content += json.pass[i] + ' 未派发过本红包\n';
            }
            content += '\n';
            for (i = 0, l = json.fail.length; i < l; ++i) {
                content += json.fail[i] + ' 已派发过本红包, 不再发放\n';
            }

            if (confirm(content)) {
                $.post(ctx + '/weixin/send_redpack.action?rd=' + getRandom(), arg, function (json) {
                    if (json.status !== 1) {
                        alert('发放红包失败: ' + json.msg);
                    }
                    else {
                        alert('发放红包成功: ' + json.msg);
                    }
                    $btnConfirmSend.attr('disabled', false);
                    loadDom.hide();
                }, 'json');
            }
            else {
                $btnConfirmSend.attr('disabled', false);
                loadDom.hide();
            }
        }, 'json');
    }


    function closeWindow(id) {
        var $window = $('#' + id);
        $window.addClass('hidden')
    }

    function openWindow(id) {
        $groupName.val('');

        $activityName.val('');
        $money.val('');
        $redpackType.val('');

        $phones.val('');
        $activity.val('');
        $remark.val('');

        var $window = $('#' + id);
        $window.removeClass('hidden')
    }

    function query() {
        loadDom.show();
        if (jqTable != null) {
            jqTable.fnDraw();
        }
        else {
            loadData();
        }
    }

    function getRandom() {
        return Math.random() + '';
    }

    var loadData = function () {
        jqTable = $('#jquery-table').dataTable({
            "columnDefs": [
                {
                    "title": '派发时间',
                    "targets": [0],
                    "data": "sendTime",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                },
                {
                    "title": '手机号',
                    "targets": [1],
                    "data": "phone",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                },
                {
                    "title": '红包金额',
                    "targets": [2],
                    "data": "money",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px",
                    "render": function (d) {
                        return d / 100;
                    }
                },
                {
                    "title": '红包限制',
                    "targets": [3],
                    "data": "type",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px",
                    "render": function (d) {
                        switch (d) {
                            case 0:
                                return '普通红包';
                            case 1:
                                return '待生效红包';
                            default:
                                return d;
                        }
                    }
                },
                {
                    "title": '所属活动',
                    "targets": [4],
                    "data": "name",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                },
                {
                    "title": '活动类型',
                    "targets": [5],
                    "data": "group",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                },
                {
                    "title": '领取时间',
                    "targets": [6],
                    "data": "receiveTime",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px",
                    "render": function (d) {
                        if (d) {
                            return d;
                        }
                        else {
                            return '<span style="color: #aaa">N/A<span>'
                        }
                    }
                },
                {
                    "title": '使用状态',
                    "targets": [7],
                    "data": "status",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px",
                    "render": function (data) {
                        if (data) {
                            switch (data) {
                                case 'SENDING':
                                    return '发放中';
                                case 'SENT':
                                    return '已发放, 待领取';
                                case 'FAILED':
                                    return '发放失败';
                                case 'RECEIVED':
                                    return '已经领取';
                                case 'REFUND':
                                    return '已退款';
                                default:
                                    return data;
                            }
                        }
                        else {
                            return '<span style="color: #aaa">等待同步<span>'
                        }
                    }
                },
                {
                    "title": '操作人',
                    "targets": [8],
                    "data": "operator",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                },
                {
                    "title": '备注',
                    "targets": [9],
                    "data": "remark",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                }
            ],
            "sAjaxSource": ctx + "/weixin/weixin_redpack_activity_list.action",
            "fnServerData": function (url, aoData, fnCallback) {
                var data = $('#queryForm').serializeObject();
                data.aoData = JSON.stringify(aoData);
                $.ajax({
                    "type": "POST",
                    "dataType": 'json',
                    "url": url,
                    "data": data,
                    "success": function (resp) {
                        try {
                            fnCallback(resp);
                        } catch (e) {
                            alert(e.name + ' :' + e.message)
                        }
                        //initListPage();
                    },
                    "error": function (XMLHttpRequest, textStatus) {
                        alert(textStatus);
                        loadDom.hide();
                    },
                    "complete": function () {
                        loadDom.hide();
                    }
                });
            },
            "sScrollXInner": "100%",
            "sScrollY": "100%",
            "aaSorting": [[0, "asc"]]
        });
    };

    jQuery(function ($) {
        $(".date-picker").datepicker({autoclose: true}).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });
        $("#sActivity").combobox();
        $("#activity").combobox();
    });
</script>
</body>
</html>